<script setup lang="ts">
import { ref } from 'vue';

const items = ref([{
  name: 'ros example',
  path: "/"
},
{
  name: 'map sub',
  path: "/map"
}
]);

</script>

<template>
  <h1 class="text-3xl font-bold underline">
    You did it!
  </h1>
  <p>
    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
    documentation
  </p>

  <nav class="w-full max-w-md mx-auto my-6 px-4">
    <!-- 菜单列表：桌面水平排列、移动端垂直排列 -->
    <ul class="flex flex-col md:flex-row gap-2 md:gap-1">
      <!-- 遍历菜单项 -->
      <li v-for="(item, index) in items" :key="index">
        <!-- 链接样式：可点击区域放大、hover 变色、激活状态区分 -->
        <a :href="item.path" class="block w-full px-4 py-3 rounded-lg text-center
                 font-medium text-gray-700 bg-gray-50
                 hover:bg-blue-50 hover:text-blue-600
                 active:bg-blue-100 active:text-blue-700
                 transition-colors duration-200 ease-in-out
                 shadow-sm hover:shadow">
          {{ item.name }}
        </a>
      </li>
    </ul>
  </nav>

  <router-view />
</template>

<style scoped></style>
